<template>

	<div class="container">
		<div class="card" style="width: 250px;">
			<div class="card-header font-5 d-flex  ">
				<label>
					<input v-model='checked_all_left' class="form-check-input" type="checkbox">
					列表1</label>

				<p>{{exist_right}}</p>
			</div>
			<div class=" list overflow-auto">
				<ul class=" list-group list-group-flush">
					<li class="list-group-item" v-for="(item,index) in list">
						<input v-model="item.checked" :disabled='item.disable' class="form-check-input" type="checkbox">
						{{item.word}}
						{{item.id}}
					</li>
				</ul>
			</div>

		</div>
		<div class="button d-grid gap-2 d-md-block ">
			<button @click='handleLeft' :disabled='exist_left<=0' class="btn btn-primary p-3 m-2"
				type="button">《</button>
			<button @click='handleRight' :disabled='exist_right<=0' class="btn btn-primary p-3" type="button">》</button>
		</div>
		<div class="card" style="width: 250px;">
			<div class="card-header font-5 ">
				<input v-model='checked_all_right' class="form-check-input" type="checkbox">
				列表2
				<p>{{exist_left}}</p>
			</div>
			<div class=" list overflow-auto">
				<ul class=" list-group list-group-flush">
					<li class="list-group-item" v-for="(item,index) in list2">
						<input v-model="item.checked" :disabled='item.disable' class="form-check-input" type="checkbox">
						{{item.word}}
						{{item.id}}
					</li>
				</ul>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		model: {
			props: 'value',
			event: 'data',
		},
		props: {
			data: {
				type: Array,
				required: true
			},
			value: {
				type: Array,
				required: true
			}
		},
		data() {
			const right_list = _ => {
				let data = [];
				data = this.data.filter((item) => this.value.includes(item.id))
				return data;
			}
			const left_list = _ => {
				let data = [];
				data = this.data.filter((item) => !this.value.includes(item.id))
				return data;
			}
			return {
				open: false,
				list2: right_list(),
				list: left_list(),
			}
		},
		computed: {
			checked_all_right: {
				set(newValue) {
					this.list2.forEach((item) => {
						if (!item.disable) {
							item.checked = newValue
						}

					})

				},
				get() {
					if (this.list2.length === 0) {
						return false;
					}
					let data = []
					data = this.list2.filter((item) => !item.disable)
					return data.every((item) => item.checked);
				}
			},
			checked_all_left: {
				set(newValue) {
					this.list.forEach((item) => {
						if (!item.disable) {
							item.checked = newValue
						}

					})

				},
				get() {
					if (this.list.length === 0) {
						return false;
					}
					let data = []
					data = this.list.filter((item) => !item.disable)
					return data.every((item) => item.checked);
				}
			},
			exist_right() {
				return this.list.filter((item) => item.checked).length
			},
			exist_left() {
				return this.list2.filter((item) => item.checked).length
			},

		},
		methods: {
			handleRight() {
				let add = this.list.filter(function(item, index) {
					return item.checked
				});
				this.list2.push(...add);

				this.list = this.list.filter(function(item, index) {
					return !item.checked
				});
				this.list2.forEach(function(item, index) {
					return item.checked = false
				})

			},
			handleLeft() {
				let remove = this.list2.filter(function(item, index) {
					return item.checked
				});
				this.list.push(...remove);

				this.list2 = this.list2.filter(function(item, index) {
					return !item.checked
				});
				this.list.forEach(function(item, index) {
					item.checked = false
				})

			},

		}
	}
</script>

<style>
	.list {
		height: 300px;
	}

	.list li {
		border: 1px solid white;
	}

	.container {
		display: flex;
		position: relative;
	}

	.button {
		position: absolute;
		top: 40%;
		left: 30.5%
	}

	.card {
		margin: 100px;
	}
</style>
